<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>HUI Picker</title>
<link rel="stylesheet" type="text/css" href="../css/hui.css" />
</head>
<body>
<header class="hui-header">
    <div id="hui-back"></div>
    <h1>HUI Picker</h1>
</header>
<div class="hui-wrap">
    <div class="hui-center-title" style="margin-top:15px;"><h1>演示样例</h1></div>
    <div style="padding:28px;">
        <button type="button" class="hui-button hui-button-large" id="btn1">选择性别</button>
        <button type="button" class="hui-button hui-button-large" id="btn2" style="margin-top:20px;">选择地区</button>
    </div>
</div>
<script type="text/javascript" src="../js/hui.js" charset="utf-8"></script>
<script type="text/javascript" src="../js/hui-picker.js" charset="utf-8"></script>
<script type="text/javascript" src="../js/cities.js" charset="utf-8"></script>
<script type="text/javascript">
/* 普通选择器 非关联型绑定 */
var picker1 = new huiPicker('#btn1', function(){
    var val = picker1.getVal(0);
    var txt = picker1.getText(0);
    hui('#btn1').html(txt + '[' + val + ']');
});
picker1.bindData(0, [{value:1, text:'男'},{value:2, text:'女'}]);

/* 地区选择， 关联型数据 */
var picker2 = new huiPicker('#btn2', function(){
    var sheng   = picker2.getText(0);
    var shi     = picker2.getText(1);
    var qu      = picker2.getText(2);
    hui('#btn2').html(sheng + shi + qu);
});
picker2.level = 3;
//cities 数据来源于 cities.js
picker2.bindRelevanceData(cities);
</script>
</body>
</html>